<template>
  <div>
    <!-- 顶部导航条 -->
    <van-tabs
      title-active-color="#7bb1b1"
      v-model="activeName"
      sticky
      animated
      color="#7bb1b1"
    >
      <van-tab title="狗狗" name="dog"></van-tab>
      <van-tab title="猫猫" name="cat"></van-tab>
    </van-tabs>
    <!-- 品种 -->
    <div>
      <span class="title"
        ><van-icon name="fire" color="#ee0a24" />热门领养</span
      >
      <van-grid :column-num="4" border>
        <van-grid-item
          v-for="(cate, i) in cats"
          :key="cate.vid"
          v-show="i < 8"
          @click.native="loadadoptlistbyvar(cate.variety)"
          ><van-image
            round
            :src="require(`../assets/varimage/${cate.varimg}`)"
          />{{ cate.variety }}</van-grid-item
        >
      </van-grid>
      <div></div>
    </div>
    <!-- 文章列表 -->
    <div style="background-color: #f5f5f5">
      <span class="title"
        ><van-icon name="like" color="#ee0a24" />猜你喜欢</span
      >
      <div class="articleList" v-if="articles.length != 0">
        <adopt-item
          @click.native="$router.push('/adoptdetail?id=' + item.id)"
          v-for="item in articles"
          :key="item.id"
          :article="item"
        ></adopt-item>
      </div>
    </div>
    <div style="height: 60px"></div>
  </div>
</template>

<script>
import AdoptItem from "../components/AdoptItem.vue";
export default {
  components: { AdoptItem },
  data() {
    return {
      activeName: "dog",
      cats: [], // 保存类别列表
      articles: [], // 保存文章列表
    };
  },

  mounted() {
    this.getData();
    this.loadadoptlist();
  },
  methods: {
    getData() {
      const url = `/pets/pets_var?sort=${this.activeName}`;
      this.axios.get(url).then((res) => {
        console.log("varres :>> ", res.data.data);
        this.cats = res.data.data;
      });
    },
    loadadoptlist() {
      this.axios.get(`/pets/adoptlist?sort=${this.activeName}`).then((res) => {
        console.log("adoptres :>> ", res.data.data);
        this.articles = res.data.data;
      });
    },
    loadadoptlistbyvar(variety) {
      this.axios.get(`/pets/adoptdetail?variety=${variety}`).then((res) => {
        console.log("adoptres :>> ", res);
        this.articles = res.data.data;
      });
    },
  },
  watch: {
    activeName() {
      this.getData();
      this.loadadoptlist();
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  display: inline-block;
  font-weight: bold;
  font-size: 18px;
  margin: 10px 5px;
  color: #2d2d2d;
}
.van-grid-item {
  font-size: 14px;
}
.articleList {
  display: flex;
  flex-wrap: wrap;
  // margin: 0 3vw;
  //   justify-content: space-evenly;
}
</style>